<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* xlsx (https://github.com/SheetJS/sheetjs)
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_openFile_react"></title>
    <script type="text/javascript" include="react" src="../js/include-web.js"></script>
    <script type="text/javascript" include="iclient-leaflet-css,xlsx"
            src="../../dist/leaflet/include-leaflet.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<div id="loading">....</div>
<script type="text/babel">
    var map = L.map('map', {
        center: [38, 110],
        zoom: 5,
    });
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var url = host + '/iserver/services/map-china/rest/maps/China';

    var baseLayers = new L.supermap.TiledMapLayer(url).addTo(map);
    var layersControl = L.control.layers({"baseLayers": baseLayers}, {}, {"position": 'topleft'}).addTo(map);

    initEditView();

    function initEditView() {
        var infoView = L.control({position: 'topright'});
        infoView.onAdd = function () {
            var me = this;
            me._div = L.DomUtil.create('div', "component-openfile");
            //避免与"源码"控件重叠
            me._div.style["margin"] = "40px 4px 0px 0px";
            me._div.id = "addDataContainer";

            handleMapEvent(me._div, me._map);
            return me._div;
        };
        infoView.addTo(map);
    }

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }

    class AddData extends React.Component {
        constructor(props) {
            super(props);
            //功能组件
            this.openFileViewModel = props.openFileViewModel;
            this.messageBox = props.messageBox;
            this.layersControl = props.layersControl;
            this.fileSelectfn = this.openFileViewModel.readFile.bind(this.openFileViewModel);
            //监听vm 事件：
            this.openFileViewModel.on("filesizeexceed", this._messageListener.bind(this));
            this.openFileViewModel.on("errorfileformat", this._messageListener.bind(this));
            this.openFileViewModel.on("openfilefailed", this._messageListener.bind(this));
            this.openFileViewModel.on("readdatafail", this._messageListener.bind(this));
            this.openFileViewModel.on("openfilesucceeded", function (e) {
                var layer = L.geoJSON(e.result).addTo(map);
                map.flyToBounds(layer.getBounds());
                layersControl.addOverlay(layer, e.layerName);
            });
        }

        _messageListener(e) {
            this.messageBox.showView(e.message, e.messageType);
        }

        render() {
            return <div className="file-select">
                <label className="component-openfile__span--select" htmlFor="input_file">
                    <div className="supermapol-icons-upload"/>
                    <span className="component-openfile__span">{this.props.text}</span>
                </label>
                <input className="component-openfile__input" id="input_file" type="file"
                       accept=".json,.geojson,.csv,.xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                       onChange={this.fileSelectfn}/>
            </div>
        }
    }

    var openFileViewModel = new L.supermap.Components.OpenFileViewModel(map);
    var messageBox = new L.supermap.Components.MessageBox();
    ReactDOM.render(
            <AddData openFileViewModel={openFileViewModel} messageBox={messageBox} text={resources.text_openFile}/>,
        document.getElementById('addDataContainer')
    );

</script>
</body>
</html>
